<!--
 * @Author: qiaoxin
 * @Date: 2024-04-10 16:02:27
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-08-29 10:36:27
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\requirement\component\card.vue
-->
<template>
    <view class="card">
        <view class="main flex items-stretch">
            <view class="flex-1">
                <view class="title_row flex left flex-1">
                    <view class="title">{{ _D.invName }}</view>
                </view>
                <view @click="toDetail">
                    <view class="row flex">
                        <view class="col">
                            <text class="label">产品规格：</text>
                            <text class="text">{{ _D.invStd }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">业务员名称：</text>
                            <text class="text">{{ _D.personName || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">需求类型：</text>
                            <text class="text">{{ _D.demandType || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">客户/供应商名称：</text>
                            <text class="text">{{ _D.cusName || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">需求单日期：</text>
                            <text class="text">{{ _D.demandDate || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">需求反馈单号：</text>
                            <text class="text">{{ _D.replyCode || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">单据日期：</text>
                            <text class="text">{{ _D.ddate || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">创建人：</text>
                            <text class="text">{{ _D.createName || _D.reateBy }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">创建时间：</text>
                            <text class="text">{{ _D.createTime || '' }}</text>
                        </view>
                    </view>
                    <view class="row flex">
                        <view class="col">
                            <text class="label">审核状态：</text>
                            <view class="text">
                                <wd-tag :bg-color="getStatus(_D.status)['color']" :color="getStatus(_D.status)['color']"
                                    plain>
                                    {{ getStatus(_D.status)['label'] }}
                                </wd-tag>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" /> -->
    </view>
</template>
  
<script lang="ts" setup>
// import { getCurrentInstance } from 'vue';
import { formatByDayjs } from '@/utils/util';
import { submitProcess, revokeProcess, delObj } from '@/service/pm-requirement';
import { useDict } from '@/hooks/dict';
const emits = defineEmits(['refresh']);
const { appContext } = getCurrentInstance();
const props = defineProps({
    _D: {
        type: Object,
        default: () => { },
    },
    showFooter: {
        type: Boolean,
        default: false,
    },
    from: {
        type: String,
        default: '',
    },
    page: {
        type: String,
        default: '/pages/pm/requirement/detail',
    },
    isOpt: {
        type: Boolean,
        default: false,
    },
    isPreview: {
        type: String,
        default: '0',
    },
});
const toDetail = () => {
    console.log(appContext, 'appContext');
    uni.navigateTo({
        url: '/pages/pm/reply/form?id=' + props._D.id,
    });
    // uni.navigateTo({
    //   url: props.page + '?id=' + props._D.id + '&isDetail=1',
    // });
    // if (props._D.status == 1 && props._D.taskId) {
    //   uni.navigateTo({
    //     url: '/pages/pm/requirement/flow-detail?id=' + props._D.id,
    //   });
    // } else {
    // if ([0, 3].includes(props._D.status)) {
    //     uni.navigateTo({
    //         url: '/pages/pm/reply/add?id=' + props._D.id,
    //     });
    // } else {

    // }

    // }
};

const statusList = [
    {
        text: '未提交',
        value: '0',
        color: '#108ee9',
    },
    {
        text: '审批中',
        value: '1',
        color: '#d46b08',
    },
    {
        text: '已审核',
        value: '2',
        color: '#87d068',
    },
    {
        text: '驳回',
        value: '3',
        color: '#f50',
    },
    {
        text: '撤回',
        value: '9',
        color: '#f50',
    },
];

const { bill_status } = useDict('bill_status');
const { review_status } = useDict('review_status');


const getReviewStatus = (reviewStatus) => {
    const reviewStatusList = [
        {
            label: '',
            value: null,
            color: '',
        },
        {
            label: '未提交',
            value: '0',
            color: '#108ee9',
        },
        {
            label: '待评审',
            value: '1',
            color: '#108ee9',
        },
        {
            label: '通过',
            value: '2',
            color: '#87d068',
        },
        {
            label: '不通过',
            value: '3',
            color: '#f50',
        },
    ];

    const o1 = reviewStatusList.find((item) => item.value == reviewStatus);
    const o = review_status.value.find((item) => item.value == reviewStatus);
    return o
        ? {
            ...o,
            color: o1 ? o1['color'] : '',
        }
        : { ...o1, label: reviewStatus };
};

const getStatus = (status) => {
    if (status == null)
        return {
            label: '未提交',
            value: '0',
            color: '#108ee9',
        };
    const o1 = statusList.find((item) => item.value == status);
    const o = bill_status.value.find((item) => item.value == status);
    return o
        ? {
            ...o,
            color: o1['color'],
        }
        : { label: status };
};

const show = ref(false);
const actions = ref([
    {
        name: '详情',
    },
]);

if (
    props._D.status == 0 ||
    props._D.status == null ||
    props._D.status == 3 ||
    props._D.status == 9
) {
    actions.value.push({
        name: '修改',
    });
    actions.value.push({
        name: '提交',
    });
    actions.value.push({
        name: '删除',
    });
}

if (props._D.status == 1) {
    actions.value.push({
        name: '撤回',
    });
}

function showActions() {
    show.value = true;
    return false;
}

function close() {
    show.value = false;
}

const select = (e) => {
    const name = e.item.name;
    if (name == '修改') {
        uni.navigateTo({
            url: '/pages/pm/report/view?id=' + props._D.id,
        });
    } else if (name == '详情') {
        uni.navigateTo({
            url: props.page + '?id=' + props._D.id + '&isDetail=1',
        });
    } else if (name == '提交') {
        uni.showModal({
            title: '提示',
            content: '是否提交该单据',
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (cancel) {
                    return;
                }
                submitProcess(props._D.id).then((res) => {
                    uni.showToast({
                        mask: true,
                        title: `单据${props._D.demandCode}提交成功`,
                    });
                    emits('refresh');
                });
            },
        });
    } else if (name == '撤回') {
        uni.showModal({
            title: '提示',
            content: '是否撤回该单据',
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (cancel) {
                    return;
                }
                revokeProcess({
                    id: props._D.id,
                    instanceId: props._D.instanceId,
                }).then((res) => {
                    uni.showToast({
                        mask: true,
                        title: `单据${props._D.demandCode}撤回成功`,
                    });
                    emits('refresh');
                });
            },
        });
    } else if (name == '删除') {
        uni.showModal({
            title: '提示',
            content: '是否删除该单据',
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (cancel) {
                    return;
                }
                delObj([props._D.id]).then((res) => {
                    uni.showToast({
                        mask: true,
                        title: `单据${props._D.demandCode}删除成功`,
                    });
                    emits('refresh');
                });
            },
        });
    }
};

const getRdFlag = (RdFlag) => {
    const RdFlagList = [
        {
            text: '未评审',
            value: null,
            color: '#108ee9',
        },
        {
            text: '不通过',
            value: '0',
            color: '#f50',
        },
        {
            text: '通过',
            value: '1',
            color: '#87d068',
        },
    ];
    const o = RdFlagList.find((item) => item.value == RdFlag);
    return o ? o : { text: RdFlag };
};

const getTaskFlag = (taskFlag) => {
    const taskflagList = [
        {
            text: '',
            value: null,
            color: '',
        },
        {
            text: '未提交',
            value: '0',
            color: '#108ee9',
        },
        {
            text: '未会签',
            value: '1',
            color: '#108ee9',
        },
        {
            text: '已会签',
            value: '2',
            color: '#87d068',
        },
    ];

    const o1 = taskflagList.find((item) => item.value == taskFlag);
    const o = review_status.value.find((item) => item.value == taskFlag);
    return o
        ? {
            ...o,
            color: o1['color'],
        }
        : { text: taskFlag };
};
</script>
  
<style scoped lang="scss">
.card {
    padding: 24rpx 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    background: #fff;
    border-radius: 15rpx;
    /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.main {
    .title_row {
        align-items: flex-start;
        overflow: hidden;
    }

    .title {
        flex: 1;
        margin-bottom: 32rpx;
        overflow: hidden;
        font-size: 32rpx;
        text-overflow: ellipsis;
        // white-space: nowrap;
    }

    .row {
        align-items: flex-start;
        margin-bottom: 24rpx;

        .col {
            display: flex;
            flex: 1;
            min-width: 45%;
            line-height: 28rpx;

            ~.col {
                margin-left: 12rpx;
            }

            .label {
                flex-shrink: 0;
                width: 200rpx;
                font-size: 26rpx;
                color: #888;
            }

            .text {
                font-size: 28rpx;
                color: #000;
                white-space: pre-wrap;
                word-break: break-all;
            }
        }
    }

    .left {
        overflow: hidden;
    }

    .right {
        flex-shrink: 0;
        margin-left: 12rpx;
        font-size: 24rpx;
        color: #666;
    }
}

.footer {
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding-top: 24rpx;
    font-size: 24rpx;
    color: #666;

    &::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1rpx;
        content: '';
        background-color: #f3f3f3;
    }

    .unit~.unit {
        margin-left: 18rpx;
    }

    .action {
        position: relative;
        right: -24rpx;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding: 6rpx 24rpx;
        font-size: 26rpx;

        .btn {
            padding: 6rpx 12rpx;

            ~.btn {
                margin-left: 16rpx;
            }
        }

        .primary {
            color: #007aff;
        }

        .danger {
            color: #f56c6c;
        }
    }

    /* // .action {
          // 	padding: 6rpx 0 6rpx;
          // 	font-size: 26rpx;
          // 	color: #007aff;
          // } */
}

:deep(.wd-tag__text) {
    padding: 2rpx 4rpx !important;

    // font-size: 28rpx !important;
}
</style>
  